<template>
  <div id="popup" class="ol-popup">
    <div id="popup-content">
      <div class="title">事件详细信息</div>
      <div class="content">
        <el-form :model="popupContent" label-width="80px" style="width: 300px">
          <el-form-item label="事件编号">
            <el-input v-model="popupContent.事件编号" placeholder="请输入事件编号" />
          </el-form-item>
          <el-form-item label="事件类型">
            <el-select v-model="popupContent.事件类型" placeholder="请选择事件类型">
              <el-option label="刮擦" value="刮擦" />
              <el-option label="追尾" value="追尾" />
              <el-option label="碾压" value="碾压" />
              <el-option label="翻车" value="翻车" />
              <el-option label="失火" value="失火" />
              <el-option label="其他" value="其他" />
            </el-select>
          </el-form-item>
          <el-form-item label="事件等级">
            <el-select v-model="popupContent.事件等级" placeholder="请选择事件等级">
              <el-option label="轻微事故" value="1" />
              <el-option label="一般事故" value="2" />
              <el-option label="重大事故" value="3" />
              <el-option label="特大事故" value="4" />
            </el-select>
          </el-form-item>
          <el-form-item label="发生时间">
            <el-date-picker v-model="popupContent.发生时间" type="datetime" placeholder="选择日期时间" disabled/>
          </el-form-item>
          <el-form-item label="发生地点">
            <el-input v-model="popupContent.发生地点" placeholder="请输入发生地点" />
          </el-form-item>
          <el-form-item label="车牌号">
            <el-input v-model="popupContent.车牌号" placeholder="请输入车牌号" />
          </el-form-item>
          <el-form-item label="驾驶员">
            <el-input v-model="popupContent.驾驶员" placeholder="请输入驾驶员" />
          </el-form-item>
          <el-form-item label="处理状态">
            <el-select v-model="popupContent.处理状态" placeholder="请选择处理状态">
              <el-option label="待处理" value="0" />
              <el-option label="处理中" value="1" />
              <el-option label="已归档" value="2" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="warning" plain @click="emit('changeEvent')">修改</el-button>
            <el-button plain color="#545c64" @click="emit('closePopup')"> 取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  popupContent: {
    type: Object,
    required: true
  }
})
const emit = defineEmits(['changeEvent', 'closePopup'])
</script>

<style scoped>
.ol-popup {
  box-sizing: border-box;
  position: absolute;
  background-color: white;
  -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
  /* padding: 15px; */
  border-radius: 5px;
  border: 1px solid #cccccc;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  min-width: 100px;
  z-index: 100;
}

.ol-popup:after,
.ol-popup:before {
  top: 100%;
  border: solid transparent;
  content: ' ';
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.ol-popup:after {
  border-top-color: white;
  border-width: 10px;
  left: 50%;
  transform: translateX(-50%);
}

.ol-popup:before {
  border-top-color: #cccccc;
  border-width: 11px;
  left: 50%;
  transform: translateX(-50%);
}

.ol-popup-closer {
  text-decoration: none;
  position: absolute;
  top: 2px;
  right: 8px;
}

#popup-content {
  font-size: 16px;
  font-family: '微软雅黑';
}

#popup-content .title {
  padding: 10px;
  background: #ffd04b;
}

table,
th,
td {
  border: 1px solid rgb(197, 196, 196);
  border-collapse: collapse;
  padding: 5px;
  /* 不换行 */
  white-space: nowrap;
}

.content {
  padding: 10px;
}

input {
  border: none;
}

.footer {
  display: flex;
  justify-content: center;
  padding: 10px;
}
</style>
